
<%--
  Created by IntelliJ IDEA.
  User: chen
  Date: 17-9-10
  Time: 下午7:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <title>登录界面</title>
        <c:set var="basePath" value="${pageContext.request.contextPath}"/>
        <link rel="stylesheet" href="${basePath}/static/css/bootstrap.min.css">
        <link rel="stylesheet" href="${basePath}/static/css/all.css" >
        <script src="${basePath}/static/js/jquery-3.2.1.min.js"></script>
        <script src="${basePath}/static/js/bootstrap.min.js"></script>
    </head>
    <body>
    <!-- 此处采用ajax登录,方便错误信息提示 -->
    <%--<form action="login" method="post">--%>
        <div style="width: 100%" id="table_div">
            <table  class="table" style="width: 28%" id="login_table">
                <caption>请登录</caption>
                    <tr>
                        <td>
                            <label for="username">用 户 名: </label>
                        </td>
                        <td>
                            <input class="form-control" id="username" name="username"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="password">密 码 : </label>
                        </td>
                        <td>
                            <input class="form-control" id="password" type="password" name="password"/>
                        </td>
                    </tr>
                    <tr>
                        <td id="td_btn_login" colspan="2">
                            <input id="sub_login" type="submit" value="登录" class="btn btn-primary" style="width: 100px"/>
                        </td>
                    </tr>
            </table>
        </div>
    <script type="text/javascript">
        var txt_usn = $("input#username");
        var txt_psr = $("input#password");
        var sub_login = $("input#sub_login");

        /**
         * 登录验证,不采用form表单提交方便与信息通知
         */
        sub_login.click(function () {
            //1.从页面提取相应信息,并判断是否为空
            var data_urn = txt_usn.val();
            var data_psw = txt_psr.val();
            if(data_psw === "" || data_urn === "" ){
                alert("输入不能为空");
                return null;
            }
            //2.使用ajax 后台通信并取得结果
            var URL = "login";    //URL
            $.ajax({
                url:URL,                                            //设置通信URL
                type:"POST",                                        //设置通信方式
                data:{                                              //添加数据
                    username:data_urn,
                    password:data_psw
                },
                dataType:"json",                                    //返回的结果类型
                success:function (srcData) {                        //成功时调用的方法
                    if(srcData.symbol === true){
                        window.location.href="/library/book/list";  //成功之后的页面跳转
                    }else{
                        alert(srcData.error);
                    }
                },
                error:function () {                                 //失败时调用的方法
                    alert("登录失败")
                }
            });

        });
    </script>
    <%--</form>--%>
    </body>
</html>
